<script setup>
import { ref, onMounted } from 'vue'
const categoryList = ref(['bold', 'underline', 'italic', 'through', 'code', 'sub', 'sup'])
const labelList = ref(['asfasf', 'afasfas', 'vfavasdvgd','asfasf', 'afasfas', 'vfavasdvgd','asfasf', 'afasfas', 'vfavasdvgd','asfasf', 'afasfas', 'vfavasdvgd'])
const visible = ref(false)
const showModal = () => {
  visible.value = true
}
</script>

<template>
<div class="selectCateAndLab">
  <yk-space :size="4" style="width:100%;" class="addArticle-selectCategory">
    <yk-tooltip placement="bottom">
      <template #content>
        <div class="addArticle-category-item" v-for="(item, index) in categoryList" :key="index"> {{ item }}</div>
      </template>
      <yk-space class="addArticle-category" :size="24">
        <div class="addArticle-category-font">选择分类</div>
        <div class="addArticle-category-icon"><IconDownOutline/></div>
      </yk-space>
    </yk-tooltip>
    <div class="addArticle-label">
      <yk-space :size="8" align="center"  wrap>
        <yk-space class="article-label" v-for="(item, index) in labelList" :key="index" align="around"> 
          <div class="article-label-name">{{ item }}</div>
          <div class="article-label-action"><IconCloseOutline/></div>
        </yk-space>
        <div class="addArticle-addLabel" @click="showModal">插入标签</div>
        <yk-modal v-model="visible" title="选择标签" :show-footer="false" size="s">
          <yk-space dir="vertical" :size="16">
            <yk-input clearable placeholder="请输入标签名" />
            <yk-space wrap :size=[8,16]> 
              <yk-space class="article-selectLabel"  v-for="(item, index) in labelList" :key="index">
                <div class="article-selectLabel-name">{{ item }}</div>
                <div class="article-selectLabel-action"><IconCloseOutline/></div>
              </yk-space>
            </yk-space>
            <div class="divider"></div>
            <yk-space wrap :size=[8,16]> 
              <yk-space class="article-allLabel"  v-for="(item, index) in labelList" :key="index">
                <div class="article-allLabel-name">{{ item }}</div>
              </yk-space>
            </yk-space>
          </yk-space>
        </yk-modal>
      </yk-space>
    </div>
  </yk-space>
</div>
</template>

<style scoped lang='less'>
.article-selectLabel {
  border-radius: 999px;
  background-color: @gray-1;
  padding:0px 8px;
}
.article-allLabel {
  border-radius: 999px;
  background-color: @gray-1;
  padding:0px 8px;

  &:hover {
    cursor: pointer;
  }

}
.divider {
  width: 100%;
  border-top: 1px solid @gray-6;
}
.selectCateAndLab {
  .addArticle-selectCategory {
    :deep(.yk-tooltip) {
      .yk-tooltip__content {
        background-color: @bg-color-l;
        width:100%;
        padding: 4px;
      }
    }
      .addArticle-category {
      .addArticle-category-font {
        color: @gray-6;
        width:56px;
      } 
    }

    .addArticle-category-item {
      color: @gray-10;
      border-radius: 8px;
      padding: 0 12px;
      height:32px;
      line-height: 32px;
      &:hover {
        background-color: @bg-color-m;
      }
    }
  }
  

  .addArticle-label {
    padding-left:8px;
    margin-left: 8px;
    border-left:1px solid @gray-6;
    width: 100%;

    .article-label {
      border-radius: 999px;
      background-color: @gray-1;
      padding:0px 8px;

    }
    .addArticle-addLabel {
      color:@gray-6;

      &:hover {
        cursor: pointer;
      }
    }
  }

}
</style>